<script setup lang="ts">
// 引入必要的样式
</script>

<template>
  <section class="section-shaped my-0 bg-center bg-cover h-120">
    <!-- Circles background -->
    <div class="shape shape-style-1 shape-purple alpha-4">
      <span style="bottom: auto; left: -4%; top: 5%; width: 160px; height: 160px;"></span>
      <span style="top: auto; right: -4%; bottom: 5%; width: 160px; height: 160px;"></span>
      <span style="bottom: auto; left: 4%; top: 8%; width: 80px; height: 80px;"></span>
      <span style="top: auto; right: 4%; bottom: 8%; width: 80px; height: 80px;"></span>
      <span style="bottom: auto; left: 40%; top: 5%; width: 100px; height: 100px;"></span>
      <span style="top: auto; right: 40%; bottom: 5%; width: 100px; height: 100px;"></span>
      <span style="bottom: auto; left: 44%; top: 8%; width: 40px; height: 40px;"></span>
    </div>
    <!-- SVG separator -->
    <div class="separator separator-bottom separator-skew z-0">
      <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
      </svg>
    </div>
    
  </section>
</template>

<style scoped>
/* 全局CSS变量定义 */
:root {
  --blue: #5e72e4;
  --indigo: #5603ad;
  --purple: #8965e0;
  --pink: #f3a4b5;
  --red: #f5365c;
  --orange: #fb6340;
  --yellow: #ffd600;
  --green: #2dce89;
  --teal: #11cdef;
  --cyan: #2bffc6;
  --gray: #8898aa;
  --gray-dark: #32325d;
  --light: #ced4da;
  --lighter: #e9ecef;
  --primary: #5e72e4;
  --secondary: #f4f5f7;
  --success: #2dce89;
  --info: #11cdef;
  --warning: #fb6340;
  --danger: #f5365c;
  --light: #adb5bd;
  --dark: #212529;
  --default: #172b4d;
  --white: #fff;
  --neutral: #fff;
  --darker: #000;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 基础样式重置 */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: left;
  color: #525f7f;
  background-color: #fff;
}

*,
:after,
:before {
  box-sizing: border-box;
}

/* 元素样式 */
figcaption,
footer,
header,
main,
nav,
section {
  display: block;
}

section {
  display: block;
  unicode-bidi: isolate;
}

/* 自定义样式类 */
.section-shaped {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-shaped .shape {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.section-shaped .shape span {
  position: absolute;
}

.section-shaped .shape+.container {
  position: relative;
  z-index: 2;
}

.section-shaped.shape-skew+.section-shaped {
  padding-top: 0;
}

.section-shaped.shape-skew+.section-shaped .container {
  padding-top: 80px;
}

.shape-style-1 span {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.shape-style-1 :nth-child(1) {
  bottom: auto;
  left: -4%;
  top: 5%;
  background: rgba(255, 255, 255, 0.1);
}

.shape-style-1 :nth-child(2) {
  top: auto;
  right: -4%;
  bottom: 5%;
  background: rgba(255, 255, 255, 0.1);
}

.shape-style-1 :nth-child(3) {
  bottom: auto;
  left: 4%;
  top: 8%;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
}

.shape-style-1 :nth-child(4) {
  top: auto;
  right: 4%;
  bottom: 8%;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
}

.shape-style-1 :nth-child(5) {
  bottom: auto;
  left: 40%;
  top: 5%;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.15);
}

.shape-style-1 :nth-child(6) {
  top: auto;
  right: 40%;
  bottom: 5%;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.15);
}

.shape-style-1 :nth-child(7) {
  bottom: auto;
  left: 44%;
  top: 8%;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
}

.shape-primary {
  background: linear-gradient(150deg, #5e72e4 0%, #98aac6 70%, #d782d9 100%);
}

.shape-primary :nth-child(1) {
  background: rgba(255, 255, 255, 0.1);
}

.shape-primary :nth-child(2) {
  background: rgba(255, 255, 255, 0.1);
}

.shape-primary :nth-child(3) {
  background: rgba(255, 255, 255, 0.3);
}

.shape-primary :nth-child(4) {
  background: rgba(255, 255, 255, 0.3);
}

.shape-primary :nth-child(5) {
  background: rgba(255, 255, 255, 0.15);
}

.shape-primary :nth-child(6) {
  background: rgba(255, 255, 255, 0.15);
}

.shape-primary :nth-child(7) {
  background: rgba(255, 255, 255, 0.2);
}

.shape-purple {
  background: linear-gradient(150deg, #3f007d 0%, #a900ff 70%, #ff00e4 100%);
}

.shape-purple span {
  background: rgba(255, 255, 255, 0.2);
}

.alpha-4 {
  opacity: 0.4;
}

.bg-center {
  background-position: 50%;
}

.bg-cover {
  background-size: cover !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.h-120 {
  height: 30rem !important;
}

.separator {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
}

.separator-bottom {
  bottom: 0;
}

.separator-skew {
  transform: skewY(-8deg);
  transform-origin: 0;
}

.fill-white {
  fill: #fff;
}

.separator svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>